Exercise

ToastShelf portal

In the 2nd project, we built a generic Toast component from scratch:

In addition to the Toast component, we also created a ToastShelf component, which was responsible for rendering a list of toasts in the bottom-right corner of the page.

Let's use a portal to ensure that the ToastShelf component always renders without issue!

Acceptance Criteria:

The ToastShelf component should use the createPortal function from React DOM to render its contents (the <ol>) in a different root node.
- You'll need to add this new root to the index.html file.

Code Playground

import React from 'react';

import { ToastContext } from '../ToastProvider';

import Toast from '../Toast';

import styles from './ToastShelf.module.css';

function ToastShelf() {

const { toasts } = React.useContext(ToastContext);

return (

<ol

className={styles.wrapper}

role="region"

aria-live="assertive"

aria-label="Notification"

{toasts.map((toast) => (

{toast.message}

</Toast>

</li>

))}

</ol>

);

}

export default ToastShelf;

Solution:

Solution code (success)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toast Example</title>
  </head>
  <body>
    <div id="root"></div>
    <div id="toast-root"></div>
  </body>
</html>

// ToastShelf.js
import React from 'react';
import { createPortal } from 'react-dom';

import { ToastContext } from '../ToastProvider';
import Toast from '../Toast';
import styles from './ToastShelf.module.css';

function ToastShelf() {
  const { toasts } = React.useContext(ToastContext);

  return createPortal(
    <ol
      className={styles.wrapper}
      role="region"
      aria-live="assertive"
      aria-label="Notification"
    >
      {toasts.map((toast) => (
        <li
          key={toast.id}
          className={styles.toastWrapper}
        >
          <Toast
            id={toast.id}
            variant={toast.variant}
          >
            {toast.message}
          </Toast>
        </li>
      ))}
    </ol>,
    document.querySelector('#toast-root')
  );
}

export default ToastShelf;

A Portal Component

Alright, let's do something fun and/or challenging: let's create a reusable Portal component!

This time, instead of editing the HTML to include a <div id="toast-root">, our Portal component will create this node dynamically. When the component mounts, it should create a brand-new DOM node, and use it as the portal's root node.

This is a challenging problem, and I don't expect you to be able to solve it. This is one of those things where we can learn a heck of a lot by fiddling and experimenting with different ideas. Give it a shot, and then watch the solution video for a breakdown.

Acceptance Criteria:

The Portal component should use the createPortal function from React DOM to render its children in a portal.
When the component is unmounted, it should clean up after itself; any dynamically-created nodes should be destroyed.
You'll know it's working when the inner box is teleported outside its parent:

Two boxes sitting adjacent, side-by-side

Code Playground

import React from 'react';

function Portal({ children }) {

return children;

}

export default Portal;

Solution:

Using document.body as the target container (info)

Discord user ancepsinfans discovered that the following approach seems to work:

function Portal({ children }) {
  return createPortal(children, document.body);
}

Instead of creating and destroying a container node, why not use document.body as the target?

I'll be honest, I really didn't expect this to work. When it comes to rendering our main application, it's a well-known bad practice to render directly into document.body:

import { createRoot } from 'react-dom/client';

// 🛑 Don't do this:
const root = createRoot(document.body);
root.render(<App />);

Why is this a bad practice? Because React expects to be the only thing managing the content of the root node. Lots of third-party scripts and browser extensions will create and inject DOM nodes into the <body>, and this can lead to all sorts of problems. React doesn't like to “share” its DOM container with anyone else.

Apparently, though, this same rule doesn't apply to portals; the official docs show examples using document.body as the target container. Popular component library MaterialUI has been doing this for years, without issue.

So, it seems as though my solution might be a bit over-engineered. At least we got some good practice with useEffect? 😅

Here's a revised solution, using the same data-attribute for easy debugging:

function Portal({ children }) {
  return createPortal(
    <div data-react-portal-host>
      {children}
    </div>,
    document.body
  );
}